import React, { Component } from 'react';

class MAlert extends Component {
    constructor(props){
        super(props);
        this.props = props;
        this.closeAlert = this.closeAlert.bind(this);
    }

    styleConfig = {
        malertRoot: {   
            width: "100%",
            height: "calc(100%)", // 这里可以根据需要调整
            overflow:'hidden',
            position: "fixed",
            left: "0",
            top: "0",
            zIndex: "999",
            transition: "all .2s",
        },
        malertBox:{
            width: "100%",
            height: "100%",
            overflow: "hidden",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            position: "relative",
            transition: "all .2s",
        }
    }

    directionConfig = {
        left:{ transform: "translateX(-120%)" },
        right:{ transform: "translateX(120%)" },
        top:{ transform: "translateY(-120%)" },
        bottom:{ transform: "translateY(120%)" },
        center:{ transform: "scale(0)" },
        fade: { opacity: "0" },
    }

    alertCloseBtnStyle = {
        position: "absolute",
        zIndex: "100",
        right: "35px",
        top: "40px",
        width: "40px",
        height: "40px",
        textAlign: "center",
        lineHeight: "40px",
        backgroundColor: "#999",
        borderRadius: "50%",
        color: "#fff",
        fontSize: "16px",
        border: "0",
        outline: "none",
    }

    closeAlert(){
        if(this.props.direction === "top"){
            this.alertBox.style.transform="translateY(-120%)";
        }else if(this.props.direction === "bottom"){
            this.alertBox.style.transform="translateY(120%)";
        }else if(this.props.direction === "left"){
            this.alertBox.style.transform="translateX(-120%)";
        }else if(this.props.direction === "right"){
            this.alertBox.style.transform="translateX(120%)";
        }else if(this.props.direction === "center"){
            this.alertBox.style.transform="scale(0)";
        }else if(this.props.direction === "fade"){
            this.alertBox.style.opacity="0";
        }
        this.malertRoot.style.backgroundColor = "rgba(0, 0, 0, 0)";
        setTimeout(()=>{
            if(this.props.callAlert) this.props.callAlert(false);
        },220);
    }
   
    componentDidMount(){
        this.alertCloseBtn.addEventListener('click',this.closeAlert);
        setTimeout(()=>{
            if(this.props.direction === "top"){
                this.alertBox.style.transform="translateY(0%)";
            }else if(this.props.direction === "bottom"){
                this.alertBox.style.transform="translateY(0%)";
            }else if(this.props.direction === "left"){
                this.alertBox.style.transform="translateX(0%)";
            }else if(this.props.direction === "right"){
                this.alertBox.style.transform="translateX(0%)";
            }else if(this.props.direction === "center"){
                this.alertBox.style.transform="scale(1)";
            }else if(this.props.direction==="fade"){
                this.alertBox.style.opacity="1";
            }
            this.malertRoot.style.backgroundColor = "rgba(0, 0, 0, .3)";
        },20);
    }

    render(){
        return (
            <div className="malertRoot" style={this.styleConfig.malertRoot} ref={malertRoot=>this.malertRoot = malertRoot}>
                <div style={Object.assign({},this.styleConfig.malertBox,this.directionConfig[this.props.direction])}
                    ref = {alertBox => this.alertBox = alertBox}>
                    <button ref={alertCloseBtn=>this.alertCloseBtn = alertCloseBtn}
                        style={this.props.closeBtnStyle
                            ? Object.assign({},this.alertCloseBtnStyle,this.props.closeBtnStyle)
                            : this.alertCloseBtnStyle}>
                        {this.props.closeBtnText?this.props.closeBtnText:"✘"}
                    </button>
                    {this.props.alertTpye
                        ? <div style={{backgroundColor:"#fff",borderRadius:"10px",padding:"10px",
                             width:"80%",height:"120px",overflowY:"auto",margin:"auto", fontSize:"18px",
                             display:"flex",alignItems:"center",justifyContent:"center"}}>
                            <p>{this.props.alertTpye.content}</p>
                        </div>
                        : this.props.children
                }
                    
                </div>
            </div>
        )
    }
}

export default MAlert;

/* 父组件调用说明

1. 定义 callAlert 方法 用于调用弹窗
    state = { showAlert:false, }
    callAlert(flag){
        this.setState({showAlert: flag})
    } 

2. 父组件中定义调用弹窗按钮，并绑定callAlert事件
    <button onClick={()=>{this.callAlert.call(this,true)}}>调用弹窗</button>

3. render 中 输出 MAlert 组件，需要传入两个必要参数：
        direction = "left | righet | top | bottom | center | fade" // 弹窗弹出方式
        callAlert = {this.callAlert.bind(this)} // callAlert 方法
        [closeBtnText="关闭"] // 关闭按钮显示的文本，可选参数
        [closeBtnStyle={this.alertCloseBtnStyle}] // 可外部传入关闭按钮样式
    
        备注：
            在父组件中对 div.alert-body 以及其子节点进行内容和样式编码，
            这样会让弹窗适应性更强

    { this.state.showAlert?
        <MAlert direction="center" callAlert = {this.callAlert.bind(this)} [closeBtnText="关闭"] >

            <div className={style["alert-body"]}>
                <div>百货</div>
            </div>

        </MAlert>:null
    }
*/
